<!--
 * @author hugh
 * @time  2021-01-10 11:40
 * @title  数据统计
 * @desc
 -->
<template>
  <div class="about">
    <el-row>
      <el-col :span="6" v-for="(item,index) in menus" :key="index" class="padding-sm">
        <el-card :body-style="{ padding: '0px' }">
          <div class="flex justify-between align-center">
            <div class="padding-sm">
              <!-- <svg-icon></svg-icon> -->
              <i class="size-65 text-gray" :class="'el-icon-'+item.icon"></i>
            </div>
            <div class="text-center padding-sm margin-right-sm">
              <h3>{{item.title}}</h3>
              <h2>{{ item.value }}</h2>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="padding-sm">
        <el-card :body-style="{ padding: '0px' }">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12" class="padding-sm">
        <el-card :body-style="{ padding: '0px' }">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="padding-sm">
        <el-card :body-style="{ padding: '0px' }">
          <div id="chart" style="width: 100%;height:20rem;"></div>
        </el-card>
      </el-col>
      <el-col :span="12" class="padding-sm">
        <el-card :body-style="{ padding: '0px' }">
          <div id="chart1" style="width: 100%;height:20rem;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    reactive,
    getCurrentInstance
  } from 'vue'
  import {
    useRouter
  } from 'vue-router';
  export default defineComponent({
    name: 'Home',
    components: {},
    data() {
      return {
        headerTitle: '首页',
        showMenus: true,
        menus: [{
            title: '用户数量',
            icon: 'location',
            value: 1232
          },
          {
            title: '今日新增',
            icon: 'location',
            value: 3144
          },
          {
            title: '累计收益',
            icon: 'location',
            value: 12312
          }, {
            title: '活跃人数',
            icon: 'location',
            value: 123123
          }

        ],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    },
    setup() {
      const router = useRouter();
      const {
        proxy
      } = getCurrentInstance() as any;

      function toRouter(path: string) {
        router.push(path);
      }
      //设置默认页面
      toRouter('/statistics')

      function drawLine() {
        const option = {
          title: {
            text: '顾客渠道区域图'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }

            }
          },
          legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {},
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        };
        const ele = document.getElementById('chart');
        const chart = proxy.$echarts.init(ele);
        chart.setOption(option);
      }

      function drawLine2() {
        const option = {
          backgroundColor: '#2c343c',

          title: {
            text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },

          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },

          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [{
                value: 335,
                name: '直接访问'
              },
              {
                value: 310,
                name: '邮件营销'
              },
              {
                value: 274,
                name: '联盟广告'
              },
              {
                value: 235,
                name: '视频广告'
              },
              {
                value: 400,
                name: '搜索引擎'
              }
            ].sort(function(a: any, b: any) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.3)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx: any) {
              return Math.random() * 200;
            }
          }]
        };
        const ele = document.getElementById('chart1');
        const chart = proxy.$echarts.init(ele);
        chart.setOption(option);
      }
      return {
        toRouter,
        drawLine,
        drawLine2
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.drawLine()
        this.drawLine2();
      });
    }

  })
</script>
<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
